<template>
  <div class="table-page-search-wrapper">
    <div class="top" style=" margin-top:21px">
      访问核心数据
    </div>
    <a-card :bordered="false" class="aCard">
      <a-radio-group v-model="visitParams.dataType" defaultValue="1" class="aRadio">
        <a-radio-button value="1">按品牌</a-radio-button>
        <a-radio-button value="2">按专题</a-radio-button>
      </a-radio-group>
      <a-form layout="inline">
        <a-row :gutter="20">
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-select v-if="visitParams.dataType == 1" v-model="visitParams.brandId" placeholder="请选择" show-search>
                <a-select-option :value="item.id.toString()" v-for="item in brandList" :key="item.id"> {{ item.brandName }} </a-select-option>
              </a-select>
              <a-select v-if="visitParams.dataType == 2" optionFilterProp="children" v-model="visitParams.themeId" placeholder="请选择" show-search @search="searchVisitTheme">
                <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                <a-select-option :value="item.id.toString()" v-for="item in visitThemeList" :key="item.id"> {{ item.themeName }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-range-picker
                :placeholder="['开始时间', '结束时间']"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                v-model="visitDate"/>
            </a-form-item>
          </a-col>
          <a-button type="primary" icon="search" @click="getVisitData">查询</a-button>
        </a-row>
      </a-form>
      <div class="topCard">
        <div class="topDIv">
          <img src="../../../../src/assets/less20th/uv.png" alt="" class="img">
          <div class="aCardTitle">访问人数</div>
          <div class="Number">{{visitData.userVisit}}</div>
        </div>
        <div class="topDIv">
          <img src="../../../../src/assets/less20th/pv.png" alt="" class="img">
          <div class="aCardTitle">访问量</div>
          <div class="Number">{{visitData.pageVisit}}</div>
        </div>
        <div class="topDIv">
          <img src="../../../../src/assets/less20th/ls.png" alt="" class="img">
          <div class="aCardTitle">跳失率</div>
          <div class="Number">{{visitData.loseVisit}}%</div>
        </div>
      </div>
    </a-card>

    <div class="top">
      <div>分段维度统计</div>
    </div>
    <a-card :bordered="false" class="aCard">
      <a-radio-group v-model="segmentedParams.dataType" defaultValue="1" class="aRadio">
        <a-radio-button value="1">按品牌</a-radio-button>
        <a-radio-button value="2">按专题</a-radio-button>
      </a-radio-group>
      <a-form layout="inline">
        <a-row :gutter="20">
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-select v-if="segmentedParams.dataType == 1" v-model="segmentedParams.brandId" placeholder="请选择" show-search>
                <a-select-option :value="item.id.toString()" v-for="item in brandList" :key="item.id"> {{ item.brandName }} </a-select-option>
              </a-select>
              <a-select v-if="segmentedParams.dataType == 2" optionFilterProp="children" v-model="segmentedParams.themeId" placeholder="请选择" show-search @search="searchSegmentedTheme">
                <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                <a-select-option :value="item.id.toString()" v-for="item in segmentedThemeList" :key="item.id"> {{ item.themeName }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-range-picker
                :placeholder="['开始时间', '结束时间']"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                v-model="segmentedDate"/>
            </a-form-item>
          </a-col>
          <a-button type="primary" icon="search" @click="getSegmentedData">查询</a-button>
        </a-row>
      </a-form>
      <a-table ref="segmentedTable" :rowKey="record => record.segmentedValue" size="default" :pagination="false"
               :columns="segmentedColumns" :data-source="segmentedData">
      </a-table>
    </a-card>

    <div class="top">
      <div>券统计</div>
    </div>
    <a-card :bordered="false" class="aCard">
      <div style="display:flex;justify-content: space-between;">
        <a-radio-group v-model="couponParams.dataType" defaultValue="1" class="aRadio">
          <a-radio-button value="1">按品牌</a-radio-button>
          <a-radio-button value="2">按专题</a-radio-button>
        </a-radio-group>
        <img src="../../../../src/assets/less20th/download.png" alt="" @click="handleExportXls('数据看板')" style="width:32px;height:32px">
      </div>
      <a-form layout="inline">
        <a-row :gutter="20">
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-select v-if="couponParams.dataType == 1" v-model="couponParams.brandId" placeholder="请选择" show-search>
                <a-select-option :value="item.id.toString()" v-for="item in brandList" :key="item.id"> {{ item.brandName }} </a-select-option>
              </a-select>
              <a-select v-if="couponParams.dataType == 2" label-in-value optionFilterProp="children" v-model="couponTheme" placeholder="请选择" show-search @search="searchCouponTheme" @change="handleChange">
                <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                <a-select-option :value="item.id.toString()" v-for="item in couponThemeList" :key="item.id"> {{ item.themeName }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="5" :xl="5" :lg="5" :sm="24">
            <a-form-item>
              <a-range-picker
                :placeholder="['开始时间', '结束时间']"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                v-model="couponDate"/>
            </a-form-item>
          </a-col>
          <a-button type="primary" icon="search" @click="getCouponData">查询</a-button>
        </a-row>
      </a-form>
      <s-table ref="couponTable" size="default" :rowKey="record => record.awardid" :columns="couponColumns" :data="loadCouponData" :pagination="paginationProps">
      </s-table>
    </a-card>
  </div>
</template>

<script>
  import { dataAnalyseVisit,dataAnalysSegmented,dataAnalyseCoupon,brandList,themeList,dataAnalyseCouponExport } from '@/api/marketingCenter/less'
  import { STable } from '@/views/box/components'
  import ARow from 'ant-design-vue/es/grid/Row'
  import ACol from 'ant-design-vue/es/grid/Col'

  const segmentedColumns = [
    {
      title: '亲密值分段',
      dataIndex: 'segmentedValue',
      align: 'center',
    },
    {
      title: '访问次数',
      dataIndex: 'pageVisit',
      align:"center"
    },
    {
      title: 'PV占比',
      dataIndex: 'pvRatio',
      align:"center"
    }
  ]
  const couponColumns = [
    {
      title: '单券ID',
      dataIndex: 'awardid',
      align: 'center',
    },
    {
      title: '领取人数',
      dataIndex: 'receiveUV',
      align:"center"
    },
    {
      title: '领取总次数',
      dataIndex: 'receiveQuantity',
      align:"center"
    }
  ]

  export default {
    components: {
      ACol,
      ARow,
      STable
    },
    data() {
      return {
        fetching: false,
        visitData:{},
        segmentedColumns,
        couponColumns,
        segmentedData: [],
        brandList: [],
        visitDate: [],
        segmentedDate: [],
        couponDate: [],
        visitThemeList: [],
        segmentedThemeList: [],
        couponThemeList: [],
        visitParams: {
          dataType: '1',
          brandId: 2822095692,
          themeId: '',
          startDate: '',
          endDate: ''
        },
        segmentedParams: {
          dataType: '1',
          brandId: 2822095692,
          themeId: '',
          startDate: '',
          endDate: ''
        },
        couponTheme: '',
        couponParams: {
          dataType: '1',
          brandId: '2822095692',
          themeId: '',
          startDate: '',
          endDate: ''
        },
        paginationProps: {
          total: 0,
          showTotal: total => `共有 ${total} 条数据`
          // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
        },
        // 加载数据方法 必须为 Promise 对象
        loadCouponData: parameter => {
          const data = {
            "current": parameter.pageNo,
            "size": parameter.pageSize,
            ...this.couponParams
          }
          return dataAnalyseCoupon(data).then(res => {
            if (res.code === 200) {
              const { records, total, size, current } = res.data
              const data = {
                page: {
                  count: total,
                  pageNo: current,
                  pageSize: size,
                  pages: Math.ceil(total / size)
                },
                data: records
              }
              return data
            } else {
              this.$message.error(res.msg || res.message)
              const data = {
                page: {
                  count: 0,
                  pageNo: 0,
                  pages: 0
                },
                data: []
              }
              return data
            }
          })
        }
      }
    },
    computed: {},
    watch: {},
    created(){
      this.getBrandList()
      this.getVisitData()
      this.getSegmentedData()
      this.searchTheme()
    },
    mounted(){},
    methods: {
      getVisitData(){
        this.visitParams.startDate = this.visitDate[0]
        this.visitParams.endDate = this.visitDate[1]
        dataAnalyseVisit(this.visitParams).then(res=>{
          if (res.code === 200) {
            this.visitData = res.data
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
      },
      getSegmentedData(){
        this.segmentedParams.startDate = this.segmentedDate[0]
        this.segmentedParams.endDate = this.segmentedDate[1]
        dataAnalysSegmented(this.segmentedParams).then(res=>{
          if (res.code === 200) {
            this.segmentedData = res.data
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
      },
      getCouponData(){
        this.couponParams.startDate = this.couponDate[0]
        this.couponParams.endDate = this.couponDate[1]
        this.$refs.couponTable.refresh(true)
      },
      getBrandList() {
        brandList({
          current: 0,
          size: 99,
          state: 1
        }).then(res => {
          if (res.code === 200) {
            this.brandList = res.data.records
          } else {
            this.$message.error(res.msg || res.message)
          }
        }).catch(err => {
        })
      },
      searchTheme() {
        themeList({
          current: 0,
          size: 99
        }).then(res => {
          if (res.code === 200) {
            this.visitThemeList = res.data.records
            this.segmentedThemeList = res.data.records
            this.couponThemeList = res.data.records
          } else {
            this.$message.error(res.msg || res.message)
          }
        }).catch(err => {
        })
      },
      async searchVisitTheme(value) {
        this.getThemeList(value, 1)
      },
      async searchSegmentedTheme(value) {
        this.getThemeList(value, 2)
      },
      async searchCouponTheme(value) {
        this.getThemeList(value, 3)
      },
      getThemeList(value, key) {
        this.fetching = true;
        themeList({
          current: 0,
          size: 99,
          themeName: value
        }).then(res => {
          this.fetching = false;
          if (res.code === 200) {
            switch (key) {
              case 1:
                this.visitThemeList = res.data.records
                console.log(this.visitThemeList)
                break;
              case 2:
                this.segmentedThemeList = res.data.records
                break;
              case 3:
                this.couponThemeList = res.data.records
                break;
            }
          } else {
            this.$message.error(res.msg || res.message)
          }
        }).catch(err => {
        })
      },
      handleChange(value) {
        this.couponParams.themeId = value.key
        this.couponParams.themeName = value.label
      },
      handleExportXls(fileName){
        if(this.couponParams.dataType == 1){
          this.couponParams.brandName = this.brandList.filter(e => e.id == this.couponParams.brandId)[0].brandName
        }
        dataAnalyseCouponExport(this.couponParams).then((data)=>{
          if (!data) {
            this.$message.warning("文件下载失败")
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
          }else{
            let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName+'.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          }
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .top{
    color:#303133;
    font-size:16px;
    font-weight: 600;
    margin-left:30px;
  }
  .topCard{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .aCard{
    margin: 20px 30px 30px 30px !important;
  }
  .aRadio {
    margin-bottom: 10px;
  }
  .topDIv{
    flex-grow: 1;
    width: 0;
    height: 140px;
    position: relative;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    
    &:nth-child(n+2) {
        margin-left: 25px;
    }
    
        .img {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
        }
    
      .aCardTitle{
        position:absolute;
        line-height: 16px;
        font-size: 16px;
        color:#fff;
        top:30px;
        left:48px
      }
      .Number{
        position:absolute;
        line-height: 46px;
        font-size: 46px;
        color:#fff;
        top:64px;
        left:48px
      }
  }
</style>